<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性</title>
    <!--引入Vue-->
    <script type="text/javascript" src="./js/vue.js"></script>
</head>

<body>
    <div id="root">
        姓:<input type="text" v-model:value="firstname"> 名:
        <input type="text" v-model:value="lastname"> 姓名:
        <span>{{fullname}}</span>

    </div>

    <script>
        const vm = new Vue({
            el: "#root",
            data: {
                // firstname: "邓",
                // lastname: '紫琪'
            },


            //计算属性的完整配置写法
            // computed: {
            //     fullname: {
            //         //get的调用:（1）当有人读取vm身上的fullName时，get就会被调用去找computed中的fullname，且返回值作为fuallname的值 ，（2） 当所依赖的数据发生变化时         
            //         get() {
            //             //获取vm,计算属性中函数的this也是指向vue实例vm的
            //             console.log(this)
            //             console.log("get被调用了")
            //             return this.firstname + this.lastname
            //         },
            //         //如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
            //         set(value) {
            //             const arr = value.split('-')
            //             this.firstName = arr[0]
            //             this.lastname = arr[1]
            //         }
            //     }

            // },

            //计算属性的简写（当属性只读不改可以用简写）
            computed: {
                //function()代表的是计算属性中的get()函数，fullname永远都是函数返回的值，而不是真真的函数,
                fullname: function() {
                    console.log(this)
                    console.log("get被调用了")
                    return this.firstname + this.lastname

                },

                //进一步简写  fullname()代表的是get函数返回的值,
                fullname() {
                    console.log(this)
                    console.log("get被调用了")
                    return this.firstname + this.lastname

                }

            },


        });
        console.log(vm)
    </script>





</body>

</html>